<template>
  <div class="index">
    <router-view></router-view>
    <tabbar>
      <tabbar-item @on-item-click="changeTab" :selected="$route.path===item.route" :key="i" v-for="(item,i) in tabList" :link="item.route">
        <template>
          <i v-if="i!==2" slot="icon" :class="item.icon" :style="$route.path===item.route?'color:#EFA79B;':'color:#9d9d9d;'"></i>
          <i v-if="i===2" slot="icon" :class="item.icon" style="color:#5DBFE8;font-size:32px;"></i>
          <span v-if="i!==2" slot="label" :style="$route.path===item.route?'color:#EFA79B;':'color:#9d9d9d;'">{{item.name}}</span>
        </template>
      </tabbar-item>
    </tabbar>
    <actionsheet class="bot-tab" v-model="footDialog" show-cancel>
      <grid slot="header" class="item-box1" :show-vertical-dividers="false" :show-lr-borders="false" :cols="3">
        <grid-item v-for="(item,i) in itemList" :key="i" :link="item.route" :label="item.title">
          <i :style="`color:${item.color}`" slot="icon" :class="item.icon"></i>
        </grid-item>
      </grid>
    </actionsheet>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { Tabbar, TabbarItem, Group, Actionsheet, XHeader, Grid, GridItem } from 'vux';

@Component({
  components: { Tabbar, TabbarItem, Group, Actionsheet, XHeader, Grid, GridItem }
})

export default class Index extends Vue {
  footDialog = false
  itemList = [
    { icon: 'icon-soutiezi', title: '新建帖子', route: '/publishpost', color: '#ea6a6c;' },
    { icon: 'icon-ershou', title: '发布二手', route: '/publishsecond', color: '#8bc8b1;' },
    { icon: 'icon-paotui', title: '发布跑腿', route: '/errand/0', color: '#f5bb53;' },
    { icon: 'icon-icon-yijiedan', title: '我要接单', route: '/errand/1', color: '#86ba77;' },
    { icon: 'icon-toupiao', title: '发起投票', route: '/voteadd', color: '#eac44d;' },
    { icon: 'icon-huodong1', title: '发起活动', route: '/activityadd', color: '#de625f;' }
  ]
  tabList = [
    { name: '首页', route: '/home', icon: 'icon-shouye1' },
  	{ name: '消息', route: '/message', icon: 'icon-xiaoxi' },
  	{ name: '新增', icon: 'icon-xinzeng1', route: '' },
  	{ name: '订单', route: '/order', icon: 'icon-dingdan1' },
  	{ name: '我的', route: '/mine', icon: 'icon-wode2' }
  ]
  changeTab (val) {
    if (val === 2) {
      this.footDialog = true
    }
  }
}
</script>
<style lang="less">
  .index {
    box-sizing: border-box;
    padding-bottom: 55px;
    .bot-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .weui-tabbar {
      position: fixed;
      background: #ffffff;
    }
    .weui-tabbar__item {
      padding: 0;
    }
  }
</style>
